<template>
  <!--采购申请页-->
  <el-scrollbar height="665px">
    <div class="purchase">
      <div class="purchase_head">
        <div class="purchase_head_left">
          <div style="margin-left: 20px;margin-top: 7px">
            <svg t="1665972867083" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6003" width="32" height="32"><path d="M672 257H224c-88.22 0-160 71.78-160 160v319c0 88.22 71.78 160 160 160h448c88.22 0 160-71.78 160-160V417c0-88.22-71.78-160-160-160z m96 479a96.11 96.11 0 0 1-96 96H224a96.11 96.11 0 0 1-96-96V417a96.11 96.11 0 0 1 96-96h448a96.11 96.11 0 0 1 96 96z" p-id="6004" fill="#7dc5eb"></path><path d="M894.39 193.61A222.53 222.53 0 0 0 736 128H224a32 32 0 0 0 0 64h512c88.22 0 160 71.78 160 160v448a32 32 0 0 0 64 0V352a222.53 222.53 0 0 0-65.61-158.39z" p-id="6005" fill="#7dc5eb"></path><path d="M608 448H224a32 32 0 0 0 0 64h384a32 32 0 0 0 0-64zM480 640H224a32 32 0 0 0 0 64h256a32 32 0 0 0 0-64z" p-id="6006" fill="#7dc5eb"></path></svg>          </div>
          <span style="margin-left: 5px">采购详情</span>
        </div>
      </div>
      <div class="purchase_head_bottom">
        <el-col class="Display_Search">
            <span class="Display_Search_Button">
              <el-button style="margin-bottom: 10px">
                <el-icon><Search /></el-icon>
              </el-button>
            </span>
          <span class="Display_Search_Input">
              <el-input type="text" placeholder="请输入物品名称"/>
            </span>
          <span class="Display_Search_Dept">
              <span>请选择部门：</span>
              <el-cascader :options="options">
                <template #default="{ node, data }">
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </span>
        </el-col>
      </div>
      <div class="purchase_table">
        <el-table :data="tableData" height="485" style="width: 100%;font-size: 14px" >
          <el-table-column prop="getNo" label="领取编号" width="160"  align="center"/>
          <el-table-column prop="serial" label="物品编号" width="140"  align="center"/>
          <el-table-column prop="ItemName" label="物品名称" width="230" align="center" />
          <el-table-column prop="dept" label="所在部门" width="160" align="center" />
          <el-table-column prop="ApplicantForBeneficiary" label="申请领取人" width="160" align="center" />
          <el-table-column prop="amount" label="数量" width="130" align="center" />
          <el-table-column prop="remarks" label="备注" align="center" />
          <el-table-column label="操作" align="center">
            <div style="width: 140px">
              <el-button>
                <el-icon><Select /></el-icon>
              </el-button>
              <el-button>
                <el-icon><CloseBold /></el-icon>
              </el-button>
            </div>
          </el-table-column>
        </el-table>
      </div>
      <div class="purchase_table_bottom">
        <el-pagination
            style="padding-top: 10px"
            v-model:currentPage="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[5,10, 20, 30, 40]"
            small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="d.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>

import {reactive} from "vue";

const options = [
  {
    value:'1',
    label:'人事部',
  },
  {
    value:'2',
    label:'财务部',
  },
  {
    value:'3',
    label:'后勤部',
  },
  {
    value:'4',
    label:'技术部',
  },

]

const tableData =[
  {
    getNo: 'L20221001152708',
    serial:"G1001",
    ItemName:"联想小新 Pro16 2022",
    time:"2022-10-1",
    dept:"后勤部",
    amount:"2",
    UnitPrice:'6499',
    sun:"12998",
    state:"完好",
    ApplicantForBeneficiary:'钟徐轩',
    remarks : '第一次领取',
  },
  {
    getNo: 'L20221001152708',
    serial:"G1002",
    ItemName:"罗技G304无线鼠标",
    time:"2022-10-1",
    dept:"后勤部",
    amount:"2",
    UnitPrice:'200',
    sun:"400",
    state:"完好",
    ApplicantForBeneficiary:'钟徐轩',
    remarks : '人事叫我来补领',

  },
  {
    getNo: 'L20221001152708',
    serial:"G1003",
    ItemName:"惠普多功能打印机",
    time:"2022-10-1",
    dept:"后勤部",
    amount:"1",
    UnitPrice:'1199',
    sun:"1199",
    state:"完好",
    ApplicantForBeneficiary:'钟徐轩',
    remarks : '领取',

  } ,
  {
    getNo: 'L20221001152708',
    serial:"G1004",
    ItemName:"外星人ALIENWARE m15笔记本",
    time:"2022-10-11",
    dept:"人事部",
    amount:"10",
    UnitPrice:'16469',
    sun:"164690",
    state:"完好",
    ApplicantForBeneficiary:'钟徐轩',
    remarks : '补领',

  } ,
]



const d = reactive({
  //table当前展示的数据
  list:null,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData:[],
});

</script>

<style scoped>
.purchase_head{
  height: 74px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
}
.purchase_head_left{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 24px;
}
.purchase_head_bottom{
  height: 35px;
  /*border: 1px solid red;*/
  margin-top: 10px;
}
.Display_Search_Input{
  width: 300px;
  margin: 0px 20px;
  display: flex;
  flex-direction: row;
}

.Display_Search_Button{
  margin: 0px 30px 0px 0px;
}
.Display_Search{
  display: flex;
  flex-direction: row-reverse;
  height: 35px;
  font-size: 13px;
  color: #606266;
  line-height: 35px;
}
.purchase_table{
    margin-top: 10px;
 }
.purchase_table_bottom{
  height: 40px;
  width: 100%;
  background-color: #FFFFFF;
}
</style>